<template>
  <view class="page">
    <tabbar current="3"></tabbar>
    <view class="top-back">
      <view class="user-info">
        <view class="avatar">
          <image :src="userInfo.avatarUrl"></image>
        </view>
        <view
            class="username"
            @click="login"
            v-if="userInfo.nickname === '点击登录'"
        >
          点击登录
        </view>

        <view class="username" v-else>{{ userInfo.nickname }}</view>
      </view>
    </view>
    <view class="mid-box">
      <view class="box box1" @click="toViewer">
        <view class="icon">
          <image src="../../static/my/aud.png" mode=""></image>
        </view>
        <view class="viewer"> 观影人</view>
      </view>
      <view class="box address">
        <view class="icon">
          <image src="../../static/my/o2.png" mode=""></image>
        </view>
        <view class="function-item" @click="toOrderList"> 我的订单</view>
      </view>
    </view>
    <view class="function-container">
      <view class="function-item" @click="toService"> 联系客服</view>
    </view>
    <view class="logoutBox" @click="open()" v-if="isLogin()">
      <view class="logoutBtn"> 退出登录</view>
    </view>
    <uni-popup ref="logoutDialog" type="dialog">
      <uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="警告" content="你是否要退出登录"
                        @confirm="doLogout"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {updateUserInfo, userLogin} from "@/api/user/user.js";
import {TOKEN} from "../../utils/request";
import {isLogin} from "../../utils/auth";
import {queryUserInfo} from "../../api/user/user";
import store from "../../store";

export default {
  data() {
    return {
      userInfo: {
        userId: 0,
        nickname: "点击登录",
        avatarUrl:
            "https://img1.baidu.com/it/u=534429813,2995452219&fm=253&fmt=auto?w=800&h=800",
      },
    };
  },
  onShow() {
    if (isLogin()) {
      queryUserInfo().then((res) => {
        if (res.success) {
          this.userInfo = res.data;
          store.commit("saveUserInfo", res.data);
        }
      });
    }
  },
  methods: {
    isLogin,
    // 用户点击登录调用
    async login() {
      // 授权获取用户信息
      this.authUserInfo();
    },
    authUserInfo() {
      var _this = this;
      wx.showModal({
        title: "温馨提示",
        content: "亲，授权微信登录后才能正常使用小程序功能",
        async success(res) {
          //如果用户点击了确定按钮
          if (res.confirm) {
            await wx.getUserProfile({
              desc: "获取你的昵称、头像、地区及性别",
              success: async (data) => {
                await _this.doLogin();
                updateUserInfo(data.userInfo).then((res) => {
                  if (res.success) {
                    _this.userInfo = data.userInfo;
                    _this.userInfo.nickname = data.userInfo.nickName;
                  }
                });
              },
              fail: (res) => {
                //拒绝授权
                wx.showToast({
                  title: "您拒绝了请求,不能正常使用小程序",
                  icon: "error",
                  duration: 2000,
                });
                return;
              },
            });
          } else if (res.cancel) {
            //如果用户点击了取消按钮
            wx.showToast({
              title: "您拒绝了请求,不能正常使用小程序",
              icon: "error",
              duration: 2000,
            });
            return;
          }
        },
      });
    },
    doLogin() {
      return new Promise((resolve, reject) => {
        // 调用微信登录接口
        wx.login({
          success: (res) => {
            if (res.code) {
              userLogin({code: res.code})
                  .then((res) => {
                    uni.setStorage({
                      key: TOKEN,
                      data: res.data.token,
                      success: function () {
                        resolve();
                      },
                      fail: function (err) {
                        reject(err);
                      },
                    });
                  })
                  .catch((err) => {
                    console.error("用户登录失败：", err);
                    reject(err);
                  });
            } else {
              // 这里可以将 code 发送到你的服务器，用于换取用户信息等操作
              console.log("微信登录失败：", res.errMsg);
              reject(res.errMsg);
            }
          },
          fail: (err) => {
            console.error("调用微信登录接口失败：", err);
            reject(err);
          },
        });
      });
    },
    // 跳转到观影人页面
    toViewer() {
      uni.navigateTo({
        url: "/subpkg/viewer/viewer"
      });
    },
    // 跳转订单列表
    toOrderList() {
      uni.navigateTo({
        url: "/subpkg/order-list/order-list",
      });
    },
    toService() {
      uni.navigateTo({
        url: "/subpkg/service/service",
      });
    },
    open() {
      this.$refs.logoutDialog.open()
    },
    doLogout() {
      this.userInfo = {
        userId: 0,
        nickname: "点击登录",
        avatarUrl:
            "https://img1.baidu.com/it/u=534429813,2995452219&fm=253&fmt=auto?w=800&h=800",
      };
      // 去除info
      store.commit("saveUserInfo", {});
      // 删除 点赞信息
      store.commit("initUserWanna", []);
      // 删除token
      uni.removeStorageSync(TOKEN);
    }
  },
};
</script>

<style lang="scss">
.page {
  height: calc(100% - 150upx);
}

.top-back {
  position: relative;
  background-color: #d4237a;
  width: 100%;
  height: 170px;
  // padding: 1px;
  .user-info {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    background-color: white;
    border-radius: 5px;
    width: 90%;
    height: 190px;
    padding: 1px;
    box-shadow: 2px 2px 2px #eedee1;

    .avatar {
      width: 40%;
      height: 140px;
      margin: 20px 20px;
      overflow: hidden;
      border-radius: 50%;
      box-shadow: 1px 1px 1px #eedee1;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .username {
      font-size: 26px;
      margin-top: 80px;
      font-family: "youyuan";
    }
  }
}

.mid-box {
  position: relative;
  top: 70px;
  left: 20px;
  display: flex;
  width: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .box {
    display: flex;
    justify-content: space-around;
    width: 50%;
    height: 100%;
    border-radius: 5px;
    line-height: 80px;
    font-size: 20px;
    padding: 0 10px;
    border-right: 1px solid #eedee1;

    .icon {
      margin-top: 15px;
      width: 50px;
      height: 50px;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.function-container {
  position: relative;
  box-sizing: border-box;
  top: 80px;
  left: 20px;
  width: 90%;
  padding: 5px 10px;
  height: 200rpx;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 修正的 box-shadow 属性 */

  .function-item {
    height: 50px;
    width: 100%;
    font-size: 18px;
    line-height: 50px;
    color: #645054;
    border-bottom: 1px solid #fff8fb;

    .next {
      position: absolute;
      top: 0;
      font-size: 18px;
      right: 2px;
    }
  }
}

.logoutBox {
  position: fixed;
  display: flex;
  left: 0;
  bottom: 60px;
  z-index: 99;
  width: 100%;
  height: 130upx;
  // background-color: #ffffff;
  align-items: center;
  justify-content: center;
  // border-top: 1px solid #e5e5e5;
  .logoutBtn {
    height: 70%;
    width: 80%;
    background: linear-gradient(to right, #ff7e81, #ff2e79);
    border-radius: 24px;
    text-align: center;
    color: white;
    line-height: 90upx;
  }
}
</style>
